<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>고객센터</title>

    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    	<script src="/resources/js/html5shiv.js"></script>
    	<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body { 
			padding-top: 50px;
			padding-bottom: 70px;
			background-color: #f6f7f7;
		}
		.font-Nanum{
    		font-family: 'Nanum Gothic', sans-serif;
    	}
    	.alert{
    		width:600px;
    		position: fixed;
    		z-index: 1050;
    		left: 50%;
    		margin-left:-300px;
    		top:15px;
    		display:none;
    	}
    	.search-wrap{
    		width: 100%;
    		height: 350px;
    		background-image: url("/resources/img/search-wrap-Backgrounds.jpg");
    		margin-top: 0;
    	}
    	.search-form{
   			width: 60%;
   			margin: 120px auto;
   			display: none;
   		}
    	@media screen and (max-width: 768px){ .alert{width:100%;left:0;margin-left:0;}}
    	
    	@media screen and (max-width: 768px){
    		.search-form{
    			width: 95%;
    			margin: 50px auto;
    		}
    	}
    	.content{
    		position: relative;
    		min-height: 300px;
    		background-color: #fff;
    	}
    	.content:before {
			position: absolute;
			top: -13px;
			left: 50%;
			display: inline-block;
			border-right: 13px solid transparent;
			border-bottom: 13px solid #ccc;
			border-left: 13px solid transparent;
			border-bottom-color: rgba(0, 0, 0, 0.3);
			content: '';
			z-index: 99;
		}
		.content:after {
			position: absolute;
			top: -12px;
			left: 50%;
			display: inline-block;
			border-right: 12px solid transparent;
			border-bottom: 12px solid #ffffff;
			border-left: 12px solid transparent;
			content: '';
			z-index: 99;
		}
    </style>
	<script src="/resources/js/jquery-1.11.0.js"></script>
	<script src="/resources/js/bootstrap.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
    	
	    $(function(){
	    	$("button.close").click(function(){
    			$(this).parent().fadeOut(1000);
    		});
	    	$("div.search-form").show('slide',{'direction':'up'},1400);
	    });
    </script>
  	</head>

  	<body>
  	<!-- header -->
		<jsp:include page = "head.jsp" flush="false"/>
  	<!-- end header -->
    
    <!-- content -->
    <div class="search-wrap">
    	<div class="container">
    		<form>
	    	<div class="search-form">
				<div class="input-group input-group-lg">
					<input type="text" class="form-control" placeholder="무엇을 도와드릴까요?">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button"><i class="fa fa-search" style="font-size: 1.4em; color: #989898;"></i></button>
					</span>
					
		    	</div><!-- /input-group -->
	    	</div>
	    	</form>
	    </div>
	</div><!-- end search-warp -->
	<div class="container content">
		
	</div>
    <!-- end content -->
    
    <!-- 경보창 -->
    <div class="alert alert-success" id="successAlert">
		<button type="button" data-dismiss="alert" class="close">×</button>
		<a href="#" class="alert-link font-Nanum"></a>
	</div>

	<div class="alert alert-danger" id="failAlert">
		<button type="button" data-dismiss="alert" class="close">×</button>
		<a href="#" class="alert-link font-Nanum"></a>
	</div>
	
	<div class="alert alert-warning" id="warningAlert">
		<button type="button" data-dismiss="alert" class="close">×</button>
		<a href="#" class="alert-link font-Nanum"></a>
	</div>
    <!-- 경보창 -->
    
    
    <!-- footer -->
	<jsp:include page = "footer.jsp" flush="false"/>
	<!-- end footer -->
  </body>
</html>